# Importiere benötigte Bibliotheken
# für die Daten
import pandas as pd
import numpy as np
# für die Visualisierung
import plotly.express as px
# für die Dash-App
from jupyter_dash import JupyterDash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
# Lies vorbereitete Daten aus Pickle-Datei ein
df = pd.read_pickle("kiva_data_after_processing.pkl")
# Selektiere unfinanzierte Projekte aus den USA
df_usa = df.loc[(df.loc[:,"country"] == "United States") & (df.loc[:,"funding_ratio"] == 0),:]
# Gruppiere nach Sektoren und Aktivitäten und plotte Treemap für Projekte aus USA mit Finanzierungsrate 0
df_group = df_usa.groupby(by = ["sector","activity"], as_index = False).agg({"loan_amount":"count"})
fig = px.treemap(df_group, path = ['sector', 'activity'],
values = 'loan_amount',
color = 'loan_amount',
color_continuous_scale = "OrRd",
labels = {"loan_amount": "Anzahl Projekte", "labels": "Activity"},
hover_name = "activity",
hover_data = {"activity":True, "loan_amount":True}
)
fig.show()
# Wähle Sektoren für Drop Down Menü aus
sectors = df_usa.loc[:,"sector"].unique()
sectors.sort()
# Baue die Dash App
# 1. Erstelle App
usa_crowdproject_app = JupyterDash(__name__)
# 2. Lege Layout fest
usa_crowdproject_app.layout = html.Div(children = [
# Überschrift der App
html.H1(children = "Unfinanzierte Crowd-Investment Projekte in den USA",
style = {"text-align": "center"}
),
# Untertitel
html.Div(children = """
Anzahl der Projekte mit 0% Finanzierungsrate""",
style = {"text-align": "center"}
),
# Auswahl der Daten als Dropdown
html.Div(style={'position': 'relative', 'top': '9px', "left": "200px"}, # Adjust the position as per your requirement
children=[dcc.Dropdown(id = "dd_sector",
options = sectors,
placeholder = "Bitte ein Themenbereich auswählen",
style = {"width": "55%"},
),
]
),
# Grafik
dcc.Graph(id = "my_figure",
figure = {}
)
])
# 3. Erstelle Callback
# 3.1 Aufbau des Callbacks: Verbindung mit Elementen aus dem Layout
@usa_crowdproject_app.callback(Output(component_id = "my_figure", component_property = "figure"),
Input(component_id = "dd_sector", component_property = "value")
)
# 3.2 Erstellen der Update-Funktion: ändert sich der Input, ändert sich der Output
def update_plot(selected_sector):
# Daten selektieren
df_select = df_usa.loc[df_usa.loc[:,"sector"] == selected_sector,:]
# Daten gruppieren
df_group = df_select.groupby(by = ["activity"], as_index = False).agg({"loan_amount":"count"})
# Plot erstellen
my_figure = px.treemap(df_group, path = ["activity"],
values = "loan_amount",
color = "loan_amount",
color_continuous_scale = "OrRd",
labels = {"loan_amount": "Anzahl Projekte", "labels": "Activity"},
hover_name = "activity",
hover_data = {"activity":True, "loan_amount":True }
)
# Rückgabewert festlegen
return my_figure
# 4. App starten
usa_crowdproject_app.run_server(mode="inline")
Dash is running on http://127.0.0.1:8050/